<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { defineProps, toRefs, defineEmits, watch } from 'vue'
import MyApi from '@/service/api/my/my'
const emit = defineEmits(['success'])
const props = defineProps({
  tableForm: {
    type: Object,
    default: () => ({})
  }
})
const { tableForm } = toRefs(props)
const labelPosition = 'top'
const formLabelAlign = ref({
  qq: '',
  phone_num: '',
  faculty: '',
  sex: null //0代表男 1代表女 null代表未知
})

const formEl = ref(null)

const formData = ref()
watch(
  () => props.tableForm,
  (newVal) => {
    // 初始化数据
    formLabelAlign.value = tableForm.value
    formData.value = tableForm.value
    console.log('formLabelAlign.value', formLabelAlign.value)
  },
  { deep: true }
)

const handleChange = (type) => {
  ElMessageBox.confirm(`确认要${type == 1 ? '修改' : '重置'}信息吗`, '警告', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'warning'
  })
    .then(async () => {
      if (type == 1) {
        await formEl.value.validate((valid, fields) => {
          if (valid) {
            MyApi.updateMyInfo(formLabelAlign.value).then((res) => {
              if (res.code == 200) {
                emit('success')
                ElMessage({
                  type: 'success',
                  message: '修改成功'
                })
              }
            })
          } else {
            ElMessage({
              type: 'error',
              message: '请输入合法字段'
            })
          }
        })
      } else {
        const res = await MyApi.getMyInfo()
        if (res.code == 200) {
          formEl.value.s
          formLabelAlign.value = res.data
        }
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '修改失败'
      })
    })
}

const rules = ref({
  qq: [
    { required: true, message: '请输入qq号码', trigger: 'blur' },
    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
  ],
  phone_num: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
  ],
  sex: [{ required: false, message: '请选择性别', trigger: 'change' }]
})
</script>

<template>
  <div class="info-container">
    <el-form
      class="info-form"
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      :rules="rules"
      ref="formEl"
    >
      <el-form-item label="填写qq号码" prop="qq">
        <el-input v-model="formLabelAlign.qq"></el-input>
      </el-form-item>
      <el-form-item label="填写手机号码" prop="phone_num">
        <el-input v-model="formLabelAlign.phone_num"></el-input>
      </el-form-item>

      <el-form-item label="选择性别" prop="sex">
        <el-radio-group v-model="formLabelAlign.sex">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
          <el-radio :label="null">未知</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="btn">
      <el-button type="primary" class="confirm-btn" round plain @click="handleChange(1)"
        >修改信息</el-button
      >
      <el-button type="danger" class="confirm-btn" round plain @click="handleChange(0)"
        >重置信息</el-button
      >
    </div>
  </div>
</template>

<style scoped lang="scss">
.info-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .btn {
    width: 70%;
  }
  .confirm-btn {
    margin: 5px 15px 10px 0px;
  }
  .info-form {
    margin-top: 20px;
    width: 70%;
  }
}
</style>
